<template>
	<section class="small_adress">
		<!--<div class="search">
			<el-input v-model="input" placeholder="搜索人员"></el-input>
		</div>-->
		
		<div class="detail">
			<p class="top_title"><span  v-for="(item,index) in totelTitle"  @click="changeBrans(item.orgSerialNo)">{{item.name}}<i v-if="index!=totelTitle.length-1" > > </i></span></p>
			
			<div class="brans">
				<ul><!--部门-->
					<li v-for="item in details.brans" @click="changeBrans(item.orgSerialNo)">
						{{item.name}}
						<span style="float: right;margin-right: 15px;font-size: 15px;">></span>
					</li>
				</ul>
				<ul><!--人-->
					<li v-for="item in details.people" @click="choosePeople(item.userId,item.name)">
						<img src="../../../images/app_user.png"/>
						{{item.name}}
					</li>
				</ul>
			</div>
		
		</div>
		
	</section>
</template>

<script>
	import headImg from '../../../images/app_user.png'
	import {apiAdress,apiChangeBrans} from '../css_img_js/xieTongApi'
	export default{
		props:{
			handleIds:null,
		},
		data(){
			return{
				totelTitle:[
					
				],
				details:{
					people:[
						
					],
					brans:[
						
					],
				}
			}
		},
		methods:{
			choosePeople(val,name){/*选中这个人*/
				this.$emit('choosePeople',{userId:val,username:name});
			},
			changeBrans(val){/*点击跳转下一个部门*/
				console.log(val);
				apiChangeBrans(this,val);
			}
		},
		mounted(){
			if(this.handleIds!=null){
				this.handleIds=this.handleIds==="-1"?"0":this.handleIds;
				apiAdress(this,this.handleIds);
			}
			
		},
	}
</script>

<style scoped>
	.small_adress{
		width: 100%;
		height: 450px;
		overflow: hidden;
		border: solid 1px #EEEEEE;
		border-radius: 4px;
		box-sizing: border-box;
	}
	.search {
		padding: 10px;
		border-bottom: solid 1px #EEEEEE;
	}
	.top_title{
		    padding: 15px;
		    font-size: 17px;
		    /*color: #428de9;*/
		    border-bottom: solid 1px #EEEEEE;
	}
	.top_title span:last-child{
		color: #428de9;
	}
	li{
		    height: 44px;
		    padding-left: 15px;
		    font-size: 15px;
		    color: #333333;
		    line-height: 44px;
		    cursor: pointer;
	}
	li:hover{
		background: #eeeeee;
	}
	li img{
		height: 38px;
		width: 38px;
		vertical-align: middle;
		margin-right: 5px;
	}
	.brans{
		height: 333px;
		overflow-x: hidden;
		overflow-y: scroll;
	}
	
	
	/*滚动条美化*/
	::-webkit-scrollbar {
    width: 6px;
    padding-right: 4px;
    background-color: #B3B3B3; 
    /*其他样式，比如圆角等*/
}
/*滑块样式*/
::-webkit-scrollbar-thumb {
    -webkit-border-radius: 5px;
    border-radius: 5px;
    background-color: #428de9; 
}

</style>